<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>知乎 - 有问题，就会有答案</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind配置 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              zhihu: {
                blue: "#0f88eb",
                lightBlue: "#eaf3fb",
                gray: "#999999",
                lightGray: "#f6f6f6",
                darkGray: "#8590a6",
                text: "#121212",
                border: "#ebebeb",
              },
              dark: {
                bg: "#141414",
                card: "#1f1f1f",
                border: "#303030",
                text: "#f0f0f0",
                textSecondary: "#aaaaaa",
              },
            },
            fontFamily: {
              sans: [
                "-apple-system",
                "BlinkMacSystemFont",
                "Segoe UI",
                "Roboto",
                "Helvetica Neue",
                "Arial",
                "sans-serif",
              ],
            },
            boxShadow: {
              zhihu: "0 1px 3px rgba(0, 0, 0, 0.1)",
              "zhihu-hover": "0 4px 12px rgba(0, 0, 0, 0.1)",
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-balance {
          text-wrap: balance;
        }
        .scrollbar-thin {
          scrollbar-width: thin;
        }
        .scrollbar-thin::-webkit-scrollbar {
          width: 4px;
        }
        .scrollbar-thin::-webkit-scrollbar-thumb {
          background-color: rgba(156, 163, 175, 0.5);
          border-radius: 2px;
        }
        .dark .scrollbar-thin::-webkit-scrollbar-thumb {
          background-color: rgba(75, 85, 99, 0.5);
        }
      }
    </style>

    <style>
      /* 基础样式 */
      body {
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      /* 动画效果 */
      .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .hover-lift:hover {
        transform: translateY(-2px);
      }

      /* 导航栏滚动效果 */
      .nav-scrolled {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
      .dark .nav-scrolled {
        background-color: rgba(20, 20, 20, 0.95);
      }

      /* 点赞按钮动画 */
      .vote-btn {
        transition: all 0.2s ease;
      }
    </style>
  </head>

  <body class="bg-gray-50 text-zhihu-text dark:bg-dark-bg dark:text-dark-text">
    <!-- 顶部导航栏 -->
    <header
      id="main-nav"
      class="sticky top-0 z-50 bg-white dark:bg-dark-bg border-b border-zhihu-border dark:border-dark-border transition-all duration-300"
    >
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-14">
          <!-- 左侧Logo和导航 -->
          <div class="flex items-center">
            <!-- Logo -->
            <a href="#" class="flex items-center mr-8">
              <svg
                class="w-8 h-8 text-zhihu-blue"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                />
              </svg>
            </a>

            <!-- 主导航 - 桌面端 -->
            <nav class="hidden md:flex items-center space-x-6">
              <a href="#" class="text-gray-900 dark:text-white font-medium"
                >首页</a
              >
              <a
                href="#"
                class="text-zhihu-gray dark:text-dark-textSecondary hover:text-zhihu-blue dark:hover:text-zhihu-blue transition-colors"
                >发现</a
              >
              <a
                href="#"
                class="text-zhihu-gray dark:text-dark-textSecondary hover:text-zhihu-blue dark:hover:text-zhihu-blue transition-colors"
                >话题</a
              >
              <a
                href="#"
                class="text-zhihu-gray dark:text-dark-textSecondary hover:text-zhihu-blue dark:hover:text-zhihu-blue transition-colors"
                >Live</a
              >
            </nav>
          </div>

          <!-- 右侧搜索、功能和用户区 -->
          <div class="flex items-center space-x-4">
            <!-- 搜索框 - 桌面端 -->
            <div
              class="hidden md:flex items-center bg-zhihu-lightGray dark:bg-dark-card rounded-full px-4 py-2 flex-1 max-w-md"
            >
              <i class="fa fa-search text-zhihu-gray mr-2"></i>
              <input
                type="text"
                placeholder="搜索知乎"
                class="bg-transparent border-none focus:outline-none text-sm w-full dark:placeholder:text-dark-textSecondary"
              />
            </div>

            <!-- 主题切换 -->
            <button
              id="theme-toggle"
              class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-card transition-colors"
            >
              <i class="fa fa-sun-o text-yellow-500 dark:hidden"></i>
              <i class="fa fa-moon-o text-gray-400 hidden dark:block"></i>
            </button>

            <!-- 消息通知 -->
            <button
              class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-card transition-colors relative"
            >
              <i class="fa fa-bell-o"></i>
              <span
                class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"
              ></span>
            </button>

            <!-- 创作中心 -->
            <button
              class="hidden sm:flex items-center gap-1 bg-zhihu-lightBlue dark:bg-zhihu-blue/20 text-zhihu-blue px-3 py-1.5 rounded-full text-sm hover:bg-zhihu-lightBlue/80 dark:hover:bg-zhihu-blue/30 transition-colors"
            >
              <i class="fa fa-pencil"></i>
              <span>创作</span>
            </button>

            <!-- 用户头像 -->
            <div class="relative group">
              <button
                class="w-8 h-8 rounded-full overflow-hidden border border-gray-200 dark:border-dark-border"
              >
                <img
                  src="https://picsum.photos/id/64/200/200"
                  alt="用户头像"
                  class="w-full h-full object-cover"
                />
              </button>

              <!-- 用户菜单 -->
              <div
                class="absolute right-0 mt-2 w-48 bg-white dark:bg-dark-card rounded-lg shadow-lg py-2 z-50 hidden group-hover:block border border-zhihu-border dark:border-dark-border"
              >
                <a
                  href="#"
                  class="block px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <i class="fa fa-user-o mr-2"></i>个人主页
                </a>
                <a
                  href="#"
                  class="block px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <i class="fa fa-cog mr-2"></i>设置
                </a>
                <div
                  class="border-t border-zhihu-border dark:border-dark-border my-1"
                ></div>
                <a
                  href="#"
                  class="block px-4 py-2 text-sm text-red-500 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                >
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </a>
              </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <button
              id="mobile-menu-button"
              class="md:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-dark-card transition-colors"
            >
              <i class="fa fa-bars"></i>
            </button>
          </div>
        </div>

        <!-- 移动端搜索框 -->
        <div class="md:hidden pb-3">
          <div
            class="flex items-center bg-zhihu-lightGray dark:bg-dark-card rounded-full px-4 py-2"
          >
            <i class="fa fa-search text-zhihu-gray mr-2"></i>
            <input
              type="text"
              placeholder="搜索知乎"
              class="bg-transparent border-none focus:outline-none text-sm w-full dark:placeholder:text-dark-textSecondary"
            />
          </div>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div
        id="mobile-menu"
        class="hidden md:hidden bg-white dark:bg-dark-card border-t border-zhihu-border dark:border-dark-border"
      >
        <div class="container mx-auto px-4 py-2">
          <nav class="flex flex-col space-y-1">
            <a
              href="#"
              class="px-3 py-2 rounded-md text-base font-medium bg-zhihu-lightBlue dark:bg-zhihu-blue/20 text-zhihu-blue"
              >首页</a
            >
            <a
              href="#"
              class="px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
              >发现</a
            >
            <a
              href="#"
              class="px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
              >话题</a
            >
            <a
              href="#"
              class="px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
              >Live</a
            >
            <a
              href="#"
              class="px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-1"
            >
              <i class="fa fa-pencil"></i>
              <span>创作中心</span>
            </a>
          </nav>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧边栏 - 热门话题和推荐 -->
        <aside class="lg:w-64 shrink-0 hidden lg:block">
          <div class="sticky top-20 space-y-6">
            <!-- 个人信息卡片 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 rounded-full overflow-hidden">
                  <img
                    src="https://picsum.photos/id/64/200/200"
                    alt="用户头像"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <h3 class="font-medium">知乎用户</h3>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    已认证 · 作家
                  </p>
                </div>
              </div>
              <div class="grid grid-cols-3 gap-2 text-center text-sm">
                <div>
                  <p class="font-medium">248</p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    关注
                  </p>
                </div>
                <div>
                  <p class="font-medium">1.2k</p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    粉丝
                  </p>
                </div>
                <div>
                  <p class="font-medium">356</p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    获赞
                  </p>
                </div>
              </div>
            </div>

            <!-- 热门话题 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <h3 class="font-semibold mb-3 flex items-center justify-between">
                <span>热门话题</span>
                <a href="#" class="text-xs text-zhihu-blue hover:underline"
                  >更多</a
                >
              </h3>
              <div class="space-y-3">
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    人工智能
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    12.5万关注 · 今日热议
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    前端开发
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    8.3万关注 · 近期活跃
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    职场经验
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    23.7万关注 · 持续热门
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    电影评论
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    15.2万关注 · 新话题
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    旅行攻略
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    9.8万关注 · 季节热门
                  </p>
                </a>
              </div>
            </div>

            <!-- 推荐用户 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <h3 class="font-semibold mb-3">推荐关注</h3>
              <div class="space-y-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full overflow-hidden">
                      <img
                        src="https://picsum.photos/id/1005/200/200"
                        alt="用户头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="text-sm font-medium">张小明</p>
                      <p
                        class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                      >
                        前端技术专家
                      </p>
                    </div>
                  </div>
                  <button
                    class="text-xs text-zhihu-blue border border-zhihu-blue rounded-full px-2 py-0.5 hover:bg-zhihu-blue hover:text-white transition-colors"
                  >
                    关注
                  </button>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full overflow-hidden">
                      <img
                        src="https://picsum.photos/id/1011/200/200"
                        alt="用户头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="text-sm font-medium">李华</p>
                      <p
                        class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                      >
                        产品经理 · 专栏作者
                      </p>
                    </div>
                  </div>
                  <button
                    class="text-xs text-zhihu-blue border border-zhihu-blue rounded-full px-2 py-0.5 hover:bg-zhihu-blue hover:text-white transition-colors"
                  >
                    关注
                  </button>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full overflow-hidden">
                      <img
                        src="https://picsum.photos/id/1025/200/200"
                        alt="用户头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="text-sm font-medium">王芳</p>
                      <p
                        class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                      >
                        AI研究员 · 博士
                      </p>
                    </div>
                  </div>
                  <button
                    class="text-xs text-zhihu-blue border border-zhihu-blue rounded-full px-2 py-0.5 hover:bg-zhihu-blue hover:text-white transition-colors"
                  >
                    关注
                  </button>
                </div>
              </div>
              <button
                class="w-full mt-3 text-sm text-zhihu-blue hover:underline"
              >
                查看更多
              </button>
            </div>
          </div>
        </aside>

        <!-- 中间内容区 - 推荐回答流 -->
        <div class="flex-1 max-w-3xl mx-auto">
          <!-- 内容分类标签 -->
          <div
            class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-3 mb-6 border border-zhihu-border dark:border-dark-border overflow-x-auto scrollbar-thin"
          >
            <div class="flex space-x-2 min-w-max">
              <button
                class="px-4 py-1.5 bg-zhihu-blue text-white rounded-full text-sm"
              >
                推荐
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                热榜
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                关注
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                科技
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                职场
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                生活
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                美食
              </button>
              <button
                class="px-4 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-sm transition-colors"
              >
                教育
              </button>
            </div>
          </div>

          <!-- 回答卡片 1 -->
          <article
            class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu mb-6 border border-zhihu-border dark:border-dark-border overflow-hidden hover-lift"
          >
            <!-- 问题标题 -->
            <div
              class="p-4 border-b border-zhihu-border dark:border-dark-border"
            >
              <h2
                class="text-lg font-semibold hover:text-zhihu-blue transition-colors"
              >
                <a href="#"
                  >2023年前端开发的发展趋势是什么？有哪些值得学习的技术？</a
                >
              </h2>
              <div
                class="flex items-center gap-2 mt-2 text-xs text-zhihu-gray dark:text-dark-textSecondary"
              >
                <span>前端开发</span>
                <span>·</span>
                <span>283 个回答</span>
                <span>·</span>
                <span>3.2 万浏览</span>
              </div>
            </div>

            <!-- 回答内容 -->
            <div class="p-4">
              <!-- 回答者信息 -->
              <div class="flex items-center gap-2 mb-3">
                <div class="w-8 h-8 rounded-full overflow-hidden">
                  <img
                    src="https://picsum.photos/id/1005/200/200"
                    alt="回答者头像"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <div class="flex items-center">
                    <p class="text-sm font-medium">张小明</p>
                    <span
                      class="ml-1 text-xs bg-blue-100 text-zhihu-blue px-1.5 py-0.5 rounded"
                      >前端专家</span
                    >
                  </div>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    3 天前 · 编辑于 2 天前
                  </p>
                </div>
              </div>

              <!-- 回答内容 -->
              <div class="prose dark:prose-invert prose-sm max-w-none">
                <p>
                  随着Web技术的不断发展，2023年前端开发领域也呈现出一些新的趋势，我认为值得关注的有以下几个方面：
                </p>

                <h4>1. 跨端开发持续升温</h4>
                <p>
                  以React
                  Native、Flutter为代表的跨端框架越来越成熟，能够实现"一次开发，多端运行"，大大提高了开发效率。特别是Flutter，凭借其出色的性能和接近原生的体验，正在获得越来越多开发者的青睐。
                </p>

                <h4>2. 低代码/无代码平台崛起</h4>
                <p>
                  低代码和无代码平台允许开发者通过可视化界面快速构建应用，这对于快速原型开发和中小企业来说非常有价值。前端开发者需要适应这种新的开发模式，学会利用这些工具提高效率。
                </p>

                <div class="my-3">
                  <img
                    src="https://picsum.photos/id/0/800/400"
                    alt="前端开发趋势图表"
                    class="rounded-lg w-full h-auto"
                  />
                </div>

                <h4>3. WebAssembly扩展前端能力</h4>
                <p>
                  WebAssembly使得C/C++、Rust等高性能语言能够在浏览器中运行，为前端开发带来了更多可能性，特别是在游戏开发、视频处理等高性能需求场景。
                </p>

                <p>对于想要学习的技术，我推荐：</p>
                <ul>
                  <li>框架：React、Vue 3、Svelte</li>
                  <li>工具链：Vite、pnpm、Turbopack</li>
                  <li>类型系统：TypeScript</li>
                  <li>构建工具：Webpack、Rollup</li>
                  <li>状态管理：Redux Toolkit、Pinia</li>
                </ul>
              </div>

              <!-- 展开全文 -->
              <a
                href="#"
                class="text-zhihu-blue text-sm hover:underline mt-2 inline-block"
                >展开全文 <i class="fa fa-angle-down"></i
              ></a>

              <!-- 互动按钮 -->
              <div
                class="flex items-center justify-between mt-4 pt-3 border-t border-zhihu-border dark:border-dark-border"
              >
                <div class="flex items-center gap-6">
                  <button
                    class="vote-btn flex items-center gap-1 text-zhihu-gray hover:text-green-500 transition-colors"
                  >
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>1.2k</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-comment-o"></i>
                    <span>234</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-star-o"></i>
                    <span>收藏</span>
                  </button>
                </div>
                <button
                  class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                >
                  <i class="fa fa-share-alt"></i>
                  <span>分享</span>
                </button>
              </div>
            </div>

            <!-- 相关推荐 -->
            <div class="bg-zhihu-lightGray dark:bg-gray-800/30 p-3">
              <p class="text-sm font-medium mb-2">相关推荐</p>
              <div class="space-y-2">
                <a
                  href="#"
                  class="block text-sm hover:text-zhihu-blue transition-colors line-clamp-1"
                  >2023年最值得学习的5个前端框架是什么？</a
                >
                <a
                  href="#"
                  class="block text-sm hover:text-zhihu-blue transition-colors line-clamp-1"
                  >TypeScript会成为前端开发的必备技能吗？</a
                >
              </div>
            </div>
          </article>

          <!-- 回答卡片 2 -->
          <article
            class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu mb-6 border border-zhihu-border dark:border-dark-border overflow-hidden hover-lift"
          >
            <!-- 问题标题 -->
            <div
              class="p-4 border-b border-zhihu-border dark:border-dark-border"
            >
              <h2
                class="text-lg font-semibold hover:text-zhihu-blue transition-colors"
              >
                <a href="#">有哪些适合程序员的高效工作习惯？</a>
              </h2>
              <div
                class="flex items-center gap-2 mt-2 text-xs text-zhihu-gray dark:text-dark-textSecondary"
              >
                <span>程序员</span>
                <span>·</span>
                <span>156 个回答</span>
                <span>·</span>
                <span>5.7 万浏览</span>
              </div>
            </div>

            <!-- 回答内容 -->
            <div class="p-4">
              <!-- 回答者信息 -->
              <div class="flex items-center gap-2 mb-3">
                <div class="w-8 h-8 rounded-full overflow-hidden">
                  <img
                    src="https://picsum.photos/id/1011/200/200"
                    alt="回答者头像"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <div class="flex items-center">
                    <p class="text-sm font-medium">李华</p>
                    <span
                      class="ml-1 text-xs bg-purple-100 text-purple-600 px-1.5 py-0.5 rounded"
                      >技术总监</span
                    >
                  </div>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    1 周前 · 编辑于 6 天前
                  </p>
                </div>
              </div>

              <!-- 回答内容 -->
              <div class="prose dark:prose-invert prose-sm max-w-none">
                <p>
                  作为一名有10年经验的程序员，我总结了一些能够提高工作效率的习惯，希望对大家有所帮助：
                </p>

                <h4>1. 制定清晰的每日计划</h4>
                <p>
                  每天早上花10分钟规划当天的工作内容，按照优先级排序，完成一项划掉一项。这能让你保持专注，避免遗漏重要任务。
                </p>

                <h4>2. 学会批量处理同类任务</h4>
                <p>
                  将类似的任务集中处理，比如回复邮件、代码审查等，这样可以减少上下文切换带来的效率损失。
                </p>

                <h4>3. 善用快捷键和自动化工具</h4>
                <p>
                  熟练掌握IDE和常用软件的快捷键，学习使用脚本自动化重复性工作，长期来看能节省大量时间。
                </p>

                <blockquote>
                  <p>
                    代码是写给人看的，只是偶尔让计算机执行。 —— 罗伯特·C·马丁
                  </p>
                </blockquote>

                <h4>4. 定期代码重构</h4>
                <p>
                  不要等到代码变得难以维护才进行重构，定期花时间优化代码结构，提高可读性和可维护性，从长远来看能节省大量时间。
                </p>

                <h4>5. 持续学习但避免过度学习</h4>
                <p>
                  每天花一定时间学习新技术是必要的，但不要陷入"为了学习而学习"的陷阱，要结合实际工作需求有针对性地学习。
                </p>
              </div>

              <!-- 互动按钮 -->
              <div
                class="flex items-center justify-between mt-4 pt-3 border-t border-zhihu-border dark:border-dark-border"
              >
                <div class="flex items-center gap-6">
                  <button
                    class="vote-btn flex items-center gap-1 text-zhihu-gray hover:text-green-500 transition-colors"
                  >
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>3.5k</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-comment-o"></i>
                    <span>412</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-star-o"></i>
                    <span>收藏</span>
                  </button>
                </div>
                <button
                  class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                >
                  <i class="fa fa-share-alt"></i>
                  <span>分享</span>
                </button>
              </div>
            </div>
          </article>

          <!-- 广告卡片 -->
          <div
            class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu mb-6 border border-zhihu-border dark:border-dark-border overflow-hidden"
          >
            <div class="p-4">
              <div class="flex items-start gap-3">
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span
                      class="text-xs bg-gray-100 dark:bg-gray-800 text-zhihu-gray px-1.5 py-0.5 rounded"
                      >广告</span
                    >
                    <h3 class="text-sm font-medium ml-2">
                      阿里云开发者成长计划
                    </h3>
                  </div>
                  <p class="text-xs text-gray-600 dark:text-gray-300 mb-2">
                    新用户专享云服务器低至1折，还有免费开发者工具和课程
                  </p>
                  <a href="#" class="text-xs text-zhihu-blue hover:underline"
                    >了解详情 <i class="fa fa-angle-right"></i
                  ></a>
                </div>
                <div
                  class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden flex-shrink-0"
                >
                  <img
                    src="https://picsum.photos/id/180/200/200"
                    alt="阿里云广告"
                    class="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 回答卡片 3 -->
          <article
            class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu mb-6 border border-zhihu-border dark:border-dark-border overflow-hidden hover-lift"
          >
            <!-- 问题标题 -->
            <div
              class="p-4 border-b border-zhihu-border dark:border-dark-border"
            >
              <h2
                class="text-lg font-semibold hover:text-zhihu-blue transition-colors"
              >
                <a href="#">人工智能会取代人类程序员吗？为什么？</a>
              </h2>
              <div
                class="flex items-center gap-2 mt-2 text-xs text-zhihu-gray dark:text-dark-textSecondary"
              >
                <span>人工智能</span>
                <span>·</span>
                <span>327 个回答</span>
                <span>·</span>
                <span>12.8 万浏览</span>
              </div>
            </div>

            <!-- 回答内容 -->
            <div class="p-4">
              <!-- 回答者信息 -->
              <div class="flex items-center gap-2 mb-3">
                <div class="w-8 h-8 rounded-full overflow-hidden">
                  <img
                    src="https://picsum.photos/id/1025/200/200"
                    alt="回答者头像"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <div class="flex items-center">
                    <p class="text-sm font-medium">王芳</p>
                    <span
                      class="ml-1 text-xs bg-green-100 text-green-600 px-1.5 py-0.5 rounded"
                      >AI研究员</span
                    >
                  </div>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary"
                  >
                    2 周前 · 编辑于 1 周前
                  </p>
                </div>
              </div>

              <!-- 回答内容 -->
              <div class="prose dark:prose-invert prose-sm max-w-none">
                <p>
                  关于AI是否会取代人类程序员，这是一个复杂的问题，我的观点是：<strong>AI会改变编程工作的方式，但不会完全取代人类程序员</strong>。
                </p>

                <p>原因如下：</p>

                <h4>1. AI擅长编码但缺乏创造性</h4>
                <p>
                  目前的AI工具如GitHub
                  Copilot、ChatGPT等确实能够根据提示生成代码，甚至解决一些复杂的编程问题。但这些工具本质上是基于现有代码库的模式匹配和预测，缺乏真正的创造性和理解能力。
                </p>

                <h4>2. 编程不仅仅是写代码</h4>
                <p>
                  软件开发不只是编写代码，还包括需求分析、系统设计、架构决策、用户体验考量等多个方面。这些工作需要深入理解业务领域、用户需求和复杂系统的交互，这是当前AI难以胜任的。
                </p>

                <div class="my-3">
                  <img
                    src="https://picsum.photos/id/160/800/400"
                    alt="程序员与AI协作示意图"
                    class="rounded-lg w-full h-auto"
                  />
                </div>

                <h4>3. AI更可能成为辅助工具</h4>
                <p>
                  未来更可能的趋势是AI成为程序员的强大辅助工具，自动化重复性工作，帮助快速生成代码原型，让程序员能够专注于更具创造性和战略性的工作。这类似于计算器没有取代数学家，而是让他们能够解决更复杂的问题。
                </p>

                <h4>4. 伦理和责任问题</h4>
                <p>
                  软件系统越来越深入地影响社会，其背后的伦理决策、安全考量需要人类来负责。AI可以生成代码，但无法为代码的社会影响负责。
                </p>

                <p>
                  总之，程序员需要适应与AI协作的新工作方式，将AI作为工具来提高效率，同时专注于发展AI难以替代的技能，如创造性思维、系统设计能力和领域知识。
                </p>
              </div>

              <!-- 展开全文 -->
              <a
                href="#"
                class="text-zhihu-blue text-sm hover:underline mt-2 inline-block"
                >展开全文 <i class="fa fa-angle-down"></i
              ></a>

              <!-- 互动按钮 -->
              <div
                class="flex items-center justify-between mt-4 pt-3 border-t border-zhihu-border dark:border-dark-border"
              >
                <div class="flex items-center gap-6">
                  <button
                    class="vote-btn flex items-center gap-1 text-zhihu-gray hover:text-green-500 transition-colors"
                  >
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>5.7k</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-comment-o"></i>
                    <span>892</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                  >
                    <i class="fa fa-star-o"></i>
                    <span>收藏</span>
                  </button>
                </div>
                <button
                  class="flex items-center gap-1 text-zhihu-gray hover:text-zhihu-blue transition-colors"
                >
                  <i class="fa fa-share-alt"></i>
                  <span>分享</span>
                </button>
              </div>
            </div>
          </article>

          <!-- 加载更多 -->
          <div class="text-center py-6">
            <button
              class="px-6 py-2 border border-zhihu-border dark:border-dark-border rounded-full text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
            >
              加载更多 <i class="fa fa-refresh ml-1"></i>
            </button>
          </div>
        </div>

        <!-- 右侧边栏 - 热榜和信息 -->
        <aside class="lg:w-80 shrink-0 hidden xl:block">
          <div class="sticky top-20 space-y-6">
            <!-- 知乎热榜 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <h3 class="font-semibold mb-4 flex items-center">
                <i class="fa fa-fire text-orange-500 mr-2"></i>
                <span>知乎热榜</span>
              </h3>
              <div class="space-y-4">
                <div class="flex gap-3">
                  <span
                    class="text-xl font-bold text-gray-200 dark:text-gray-700 flex-shrink-0"
                    >1</span
                  >
                  <div>
                    <a
                      href="#"
                      class="text-sm font-medium hover:text-zhihu-blue transition-colors line-clamp-2"
                      >为什么2023年下半年很多程序员找不到工作？</a
                    >
                    <p
                      class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-1"
                    >
                      424万热度 · 回答 3.2k
                    </p>
                  </div>
                </div>
                <div class="flex gap-3">
                  <span
                    class="text-xl font-bold text-gray-300 dark:text-gray-600 flex-shrink-0"
                    >2</span
                  >
                  <div>
                    <a
                      href="#"
                      class="text-sm font-medium hover:text-zhihu-blue transition-colors line-clamp-2"
                      >ChatGPT等AI工具会如何改变未来的教育模式？</a
                    >
                    <p
                      class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-1"
                    >
                      386万热度 · 回答 1.8k
                    </p>
                  </div>
                </div>
                <div class="flex gap-3">
                  <span
                    class="text-xl font-bold text-gray-400 dark:text-gray-500 flex-shrink-0"
                    >3</span
                  >
                  <div>
                    <a
                      href="#"
                      class="text-sm font-medium hover:text-zhihu-blue transition-colors line-clamp-2"
                      >有哪些年轻人「千万不能碰」的东西？</a
                    >
                    <p
                      class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-1"
                    >
                      352万热度 · 回答 5.7k
                    </p>
                  </div>
                </div>
                <div class="flex gap-3">
                  <span
                    class="text-sm font-bold text-zhihu-gray dark:text-dark-textSecondary flex-shrink-0 mt-1"
                    >4</span
                  >
                  <div>
                    <a
                      href="#"
                      class="text-sm font-medium hover:text-zhihu-blue transition-colors line-clamp-2"
                      >月薪3万的程序员和月薪3万的产品经理，哪个更有前途？</a
                    >
                    <p
                      class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-1"
                    >
                      318万热度 · 回答 2.4k
                    </p>
                  </div>
                </div>
                <div class="flex gap-3">
                  <span
                    class="text-sm font-bold text-zhihu-gray dark:text-dark-textSecondary flex-shrink-0 mt-1"
                    >5</span
                  >
                  <div>
                    <a
                      href="#"
                      class="text-sm font-medium hover:text-zhihu-blue transition-colors line-clamp-2"
                      >如何看待「996工作制」正在逐渐退出历史舞台？</a
                    >
                    <p
                      class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-1"
                    >
                      296万热度 · 回答 3.1k
                    </p>
                  </div>
                </div>
              </div>
              <button
                class="w-full mt-3 text-sm text-zhihu-blue hover:underline"
              >
                查看完整热榜
              </button>
            </div>

            <!-- 今日热议 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <h3 class="font-semibold mb-3">今日热议</h3>
              <div class="space-y-3">
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    如何评价最新发布的前端框架性能对比报告？
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    1.2万讨论 · 2小时前
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    程序员应该如何平衡工作和学习新技术的时间？
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    8.7k讨论 · 5小时前
                  </p>
                </a>
                <a href="#" class="block group">
                  <p
                    class="text-sm font-medium group-hover:text-zhihu-blue transition-colors"
                  >
                    国内大厂最新的裁员潮背后有哪些原因？
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    23.5k讨论 · 昨天
                  </p>
                </a>
              </div>
            </div>

            <!-- 知乎公告 -->
            <div
              class="bg-white dark:bg-dark-card rounded-xl shadow-zhihu p-4 border border-zhihu-border dark:border-dark-border"
            >
              <h3 class="font-semibold mb-3">知乎公告</h3>
              <div class="space-y-3">
                <a
                  href="#"
                  class="block text-sm group hover:text-zhihu-blue transition-colors"
                >
                  <p class="font-medium">
                    「2023知乎开发者大会」即将开启，点击报名
                  </p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    2023-06-15
                  </p>
                </a>
                <a
                  href="#"
                  class="block text-sm group hover:text-zhihu-blue transition-colors"
                >
                  <p class="font-medium">知乎社区规范更新公告（2023年6月）</p>
                  <p
                    class="text-xs text-zhihu-gray dark:text-dark-textSecondary mt-0.5"
                  >
                    2023-06-10
                  </p>
                </a>
              </div>
            </div>

            <!-- 底部信息 -->
            <div
              class="text-xs text-zhihu-gray dark:text-dark-textSecondary text-center pt-4"
            >
              <p>知乎 © 2011-2023 北京智者天下科技有限公司</p>
              <p class="mt-1">
                本站内容使用「知识共享 署名-非商业性使用-相同方式共享 3.0
                中国大陆」许可协议
              </p>
            </div>
          </div>
        </aside>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <nav
      class="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-card border-t border-zhihu-border dark:border-dark-border flex items-center justify-around h-14 z-40"
    >
      <a
        href="#"
        class="flex flex-col items-center justify-center text-zhihu-blue"
      >
        <i class="fa fa-home text-lg"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a
        href="#"
        class="flex flex-col items-center justify-center text-zhihu-gray dark:text-dark-textSecondary"
      >
        <i class="fa fa-compass text-lg"></i>
        <span class="text-xs mt-1">发现</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center">
        <div
          class="w-10 h-10 rounded-full bg-zhihu-blue text-white flex items-center justify-center -mt-5 shadow-lg"
        >
          <i class="fa fa-plus"></i>
        </div>
      </a>
      <a
        href="#"
        class="flex flex-col items-center justify-center text-zhihu-gray dark:text-dark-textSecondary"
      >
        <i class="fa fa-bell-o text-lg"></i>
        <span class="text-xs mt-1">通知</span>
      </a>
      <a
        href="#"
        class="flex flex-col items-center justify-center text-zhihu-gray dark:text-dark-textSecondary"
      >
        <i class="fa fa-user-o text-lg"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </nav>

    <!-- JavaScript -->
    <script>
      // 主题切换功能
      const themeToggle = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;

      // 检查本地存储中的主题偏好
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      // 切换主题
      themeToggle.addEventListener("click", () => {
        htmlElement.classList.toggle("dark");

        // 保存主题偏好到本地存储
        if (htmlElement.classList.contains("dark")) {
          localStorage.theme = "dark";
        } else {
          localStorage.theme = "light";
        }
      });

      // 移动端菜单切换
      const mobileMenuButton = document.getElementById("mobile-menu-button");
      const mobileMenu = document.getElementById("mobile-menu");

      mobileMenuButton.addEventListener("click", () => {
        mobileMenu.classList.toggle("hidden");
      });

      // 导航栏滚动效果
      const mainNav = document.getElementById("main-nav");

      window.addEventListener("scroll", () => {
        if (window.scrollY > 50) {
          mainNav.classList.add("nav-scrolled");
        } else {
          mainNav.classList.remove("nav-scrolled");
        }
      });

      // 点赞按钮交互
      const voteButtons = document.querySelectorAll(".vote-btn");

      voteButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const icon = button.querySelector("i");
          const count = button.querySelector("span");

          if (icon.classList.contains("fa-thumbs-o-up")) {
            // 点赞
            icon.classList.remove("fa-thumbs-o-up");
            icon.classList.add("fa-thumbs-up");
            button.classList.add("text-green-500");
            button.classList.remove("text-zhihu-gray");

            // 增加点赞数
            count.textContent = (
              parseInt(count.textContent.replace("k", "")) * 1000 +
              1
            )
              .toString()
              .replace("000", "k");
          } else {
            // 取消点赞
            icon.classList.remove("fa-thumbs-up");
            icon.classList.add("fa-thumbs-o-up");
            button.classList.remove("text-green-500");
            button.classList.add("text-zhihu-gray");

            // 减少点赞数
            count.textContent = (
              parseInt(count.textContent.replace("k", "")) * 1000 -
              1
            )
              .toString()
              .replace("000", "k");
          }
        });
      });
    </script>
  </body>
</html>
